<template>
  <vxe-modal v-model="isShowDialog" title="取消原因选择" :mask="false" width="70vw" height="55vh" show-footer :destroy-on-close="true">
    <template #default>
      <Splitpanes>
        <Pane size="60">
          <vxe-toolbar>
            <template #buttons>
              <vxe-checkbox v-model="addToQc">
                <span class="text-bold text-blue test-shadow text-xl">纳入质量指标不正确报告</span>
              </vxe-checkbox>
            </template>
            <template #tools>
              <div class="flex justify-end form-panel">
              </div>
            </template>
          </vxe-toolbar>
          <div style="height:calc(100% - 40px)" class="padding-right-xs">
            <vxe-table ref="culCombinaTableRef" :loading="dataLoading" :data="unChkReasonList" height="auto" :border="'inner'" :column-config="{resizable: true}" :row-config="{isCurrent: true, isHover: true}">
              <vxe-column type="checkbox" width="30"></vxe-column>
              <vxe-column type="seq" width="30"></vxe-column>
              <vxe-column field="code" title="代码" width="80"></vxe-column>
              <vxe-column field="reason" title="名称" min-width="100"></vxe-column>
              <vxe-column field="cancleauditName" title="原因分组" width="100"></vxe-column>
              <vxe-column field="inputCode" title="输入码" width="100"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="40">
          <vxe-toolbar class-name="margin-left-xs">
            <template #buttons>
              <span class="text-bold">其他原因</span>
            </template>
            <template #tools>
              <div class="flex justify-end form-panel">
              </div>
            </template>
          </vxe-toolbar>
          <div class="padding-lr-xs">
            <vxe-form :data="formData1" class-name="form-panel" style="width:100%" title-width="65px">
              <vxe-form-item title="原因分组" field="cancleauditGroupId" :item-render="{}" style="width:100%" span="24">
                <template #default="{ data }">
                  <!-- <vxe-input v-model="data.cancleauditGroupId" style="width:100%" placeholder="请输入名称" clearable></vxe-input> -->
                  <vxe-select v-model="data.cancleauditGroupId" placeholder="原因分组">
                    <vxe-option v-for="m in selectDropList" :key="m.cancleauditGroupId" :value="m.id" :label="`${m.cancleauditGroup}`"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item title="其他原因" field="newReason" :item-render="{}" span="24">
                <template #default="{ data }">
                  <vxe-textarea v-model="data.newReason" style="width:100%" placeholder="其他原因" :autosize="{ minRows: 14, maxRows: 16 }"></vxe-textarea>
                </template>
              </vxe-form-item>
              <vxe-form-item title="" span="24">
                <template #title>
                  <span>&nbsp;</span>
                </template>
                <template #default>
                  <div class="flex justify-start">
                    <vxe-button type="text" class="button-blue" content="保存原因" @click="saveReasonAfterSelected" :loading="saveFirstReportLoading"></vxe-button>
                  </div>
                </template>
              </vxe-form-item>
            </vxe-form>
          </div>

        </Pane>
      </Splitpanes>
    </template>
    <template #footer>
      <div class="flex justify-end">
        <vxe-button type="text" class="button-blue margin-left-xs" content="确定" @click="confirmSelectReason" :loading="saveFirstReportLoading"></vxe-button>
        <vxe-button type="text" class="button-white margin-left-xs" content="取消" @click="isShowDialog=false"></vxe-button>
      </div>
    </template>
  </vxe-modal>
</template>
<script lang="ts" setup>
import { reactive, ref, defineExpose, getCurrentInstance } from 'vue';
import { IsEmpty, sortByField, formatDateTime } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { getOptionValueByCodeGlobalOption, getOptionValueByCodeRptGroupOption } from '@/utils/SysOptionsHelper';
import { Splitpanes, Pane } from 'splitpanes';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
let { proxy }: any = getCurrentInstance();
let bloodCultureObj = reactive({});
let mainInfo = reactive({}); //主记录病人信息
let isShowDialog = ref(false);/**控制弹窗显示与否 */
let curCulMediumObj = reactive({});/**当前选中节点 */
let saveFirstReportLoading = ref(false);/**保存初级报告 */
let addToQc = ref(true);/**纳入质量指标不正确报告 */
let culCombinaTableRef = ref(null);/**不合格原因表格对象 */
let unChkReasonList = reactive([]);/**取消审核原因 */
let formData1 = reactive({
  cancleauditGroupId: '',
  newReason: ''
});/**其他原因Form表单对象 */
let newReason = ref('');/**手动输入原因 */
let allowEditRptTime = ref(false); /**允许编辑上报时间 */
let selectDropList = reactive([]);/**下拉选择分组 */


defineExpose({
  initPage
});

function initPage() {
  findSelectDropList();
  isShowDialog.value = true;
  findReasonList();
}

/**获取下拉选择分组 */
function findSelectDropList() {
  let pageParam = {
    params: {
      keywords: ''
    }
  };
  selectDropList.length = 0; //放入数据前清空数组
  proxy.$http.get('/lab/cancleaudit/group/getCancleauditListNoPage', pageParam).then((res: any) => {
    if (res.status.code === 200) {
      selectDropList.push(...res.data);
      if (selectDropList.length > 0) {
        formData1.cancleauditGroupId = selectDropList[0].id;
      }
    }
  });
}

/**加载不合格原因 */
function findReasonList() {
  unChkReasonList.length = 0; //放入数据前清空数组
  proxy.$http
    .get('/lab/cancleaudit/reason/getCancleauditReasonList', {
      params: { keywords: '', cancleauditGroupId: '' }
    })
    .then((res: any) => {
      if (res.status.code === 200) {
        unChkReasonList.push(...res.data);
      } else {
        VXETable.modal.message({ content: res.status.msg, status: 'error' });
        return;
      }
    });
}
/**确认发布报告 */
function confirmSelectReason() {
  const arr = culCombinaTableRef.value?.getCheckboxRecords();
  proxy.$emit('confirm', arr, addToQc.value ? 1 : 0);
  isShowDialog.value = false;
}
/**保存其他原因 */
function saveReasonAfterSelected() {
  if (IsEmpty(formData1.newReason)) {
    VxeMessage("请输入原因", VxeNotifyType.error);
    return;
  }
  const reqData = { cancleauditReasons: [{ reason: formData1.newReason, inputCode: funBdsJsResult(formData1.newReason), seq: unChkReasonList.length + 1 }], reasons: formData1.cancleauditGroupId };
  proxy.$http
    .post('/lab/cancleaudit/reason/add', reqData)
    .then((res: any) => {
      if (res.status.code === 400) {
        VxeMessage('新增成功', VxeNotifyType.success);
      }
      findReasonList();
    })
    .catch((err: any) => {
      VxeMessage('新增异常', VxeNotifyType.error);
    });
}
</script>

<style lang="scss" scoped>
:deep(.vxe-modal--wrapper) {
  z-index: 10 !important;
}
:deep(.el-descriptions__label) {
  width: 120px;
}
:deep(.el-descriptions__content) {
  color: #000;
}
:deep(.vxe-cell) {
  padding-left: 5px;
}
.tableForm {
  height: calc(100% - 80px);
  .tableBody {
    height: 75%;
  }
  .formBody {
    height: 25%;
    padding: 0 25px;
    :deep(.vxe-form--item) {
      margin-right: 15px;
    }
  }
}
/* 定义父容器的样式 */
.grid-container {
  display: grid;
  /* 行列的间距（可根据需要调整） */
  gap: 2px;
  /* 根据需要设定最小的列宽和行高 */
  ///min-width: 10px;
  //min-height: 10px;
  //grid-template-columns: repeat(3, 1fr);
  /* 自动计算列数和行数 */
  grid-template-columns: repeat(10, auto);
  //grid-template-rows: repeat(auto-fit, minmax(min-height, auto));
}

/* 定义子项的样式 */
.grid-item {
  /* 这里设置了子项的基础样式 */
  background-color: #e2e2e2; //#4caf50
  color: white;
  text-align: center;
  padding: 2px;
  border-radius: 0px;
  cursor: pointer;
  //font-size: clamp(0.1rem, 0.5rem, 2rem); /* 根据容器大小动态调整字体大小 */
  //text-align: center;
}
.active {
  background-color: #4caf50;
}

.form-panel {
  :deep(.vxe-input--inner) {
    border-radius: 4px !important;
  }
}
</style>
